<template>
  <div class="anime-sidebar">
    <!-- 折叠按钮 -->
    <div class="sidebar-collapse" @click="toggleCollapse">
      <el-icon :size="20">
        <component :is="isCollapse ? 'expand' : 'fold'" />
      </el-icon>
    </div>

    <!-- 菜单区域 -->
    <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        :background-color="menuBackground"
        :text-color="menuTextColor"
        :active-text-color="activeTextColor"
        :collapse="isCollapse"
        :unique-opened="true"
    >
      <!-- 动态渲染菜单 -->
      <template v-for="item in menuData" :key="item.path">
        <!-- 有子菜单的项 -->
        <el-sub-menu
            v-if="item.children && item.children.length"
            :index="item.path"
            popper-class="anime-submenu"
        >
          <template #title>
            <el-icon v-if="item.meta?.icon">
              <component :is="item.meta.icon" />
            </el-icon>
            <span>{{ item.meta?.title }}</span>
          </template>

          <!-- 二级菜单 -->
          <el-menu-item
              v-for="child in item.children"
              :key="child.path"
              :index="child.path"
              @click="handleMenuClick(child)"
          >
            <el-icon v-if="child.meta?.icon">
              <component :is="child.meta.icon" />
            </el-icon>
            <span>{{ child.meta?.title }}</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 没有子菜单的项 -->
        <el-menu-item
            v-else
            :index="item.path"
            @click="handleMenuClick(item)"
        >
          <el-icon v-if="item.meta?.icon">
            <component :is="item.meta.icon" />
          </el-icon>
          <template #title>{{ item.meta?.title }}</template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  HomeFilled,
  VideoCamera,
  List,
  ChatDotRound,
  Plus,
  User,
  StarFilled,
  Setting,
  Tools,
  MagicStick
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 菜单状态
const isCollapse = ref(false)
const activeMenu = ref('')

// 菜单配色方案
const menuBackground = ref('rgba(255, 255, 255, 0.8)')
const menuTextColor = ref('#666')
const activeTextColor = ref('#ff6b81')

// 菜单数据（可从API获取）
const menuData = ref([
  {
    path: '/admin/home',
    meta: {
      title: '仪表盘',
      icon: HomeFilled
    }
  },
  {
    path: '/admin/anime',
    meta: {
      title: '动漫管理',
      icon: VideoCamera
    },
    children: [
      {
        path: '/admin/anime/List',
        meta: {
          title: '动漫列表',
          icon: List
        }
      },
      {
        path: '/admin/anime/files',
        meta: {
          title: '动漫文件',
          icon: ChatDotRound
        }
      },
      {
        path: '/admin/anime/comments',
        meta: {
          title: '评论管理',
          icon: ChatDotRound
        }
      },
      {
        path: '/admin/anime/add',
        meta: {
          title: '弹幕管理',
          icon: Plus
        }
      }
    ]
  },
  {
    path: '/admin/user',
    meta: {
      title: '用户管理',
      icon: User
    },
    children: [
      {
        path: '/admin/user/list',
        meta: {
          title: '用户列表',
          icon: User
        }
      },
      {
        path: '/admin/user/vip',
        meta: {
          title: 'VIP管理',
          icon: StarFilled
        }
      },
      {
        path: '/admin/user/adminuser',
        meta: {
          title: '管理员列表',
          icon: StarFilled
        }
      },
      {
        path: '/admin/user/operation',
        meta: {
          title: '运营列表',
          icon: StarFilled
        }
      },
      {
        path: '/admin/user/superadmin',
        meta: {
          title: '超级管理员',
          icon: StarFilled
        }
      }
    ]
  },
  {
    path: '/admin/system',
    meta: {
      title: '系统设置',
      icon: Setting
    },
    children: [
      {
        path: '/admin/system/basic',
        meta: {
          title: '基本设置',
          icon: Tools
        }
      },
      {
        path: '/admin/system/theme',
        meta: {
          title: '主题设置',
          icon: MagicStick
        }
      }
    ]
  }
])

// 初始化激活菜单
onMounted(() => {
  activeMenu.value = route.path
})

// 菜单点击事件
const handleMenuClick = (menuItem) => {
  router.push(menuItem.path)
  activeMenu.value = menuItem.path
}

// 切换折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style scoped>
.anime-sidebar {
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: width 0.3s;
}

.sidebar-collapse {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  color: #666;
}

.sidebar-collapse:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.el-menu-vertical {
  border-right: none;
}

.el-menu-item,
.el-submenu__title {
  height: 50px;
  line-height: 50px;
}

.el-menu-item.is-active {
  background-color: rgba(255, 107, 129, 0.1) !important;
}

.el-submenu .el-menu-item {
  min-width: 180px;
  padding-left: 50px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.el-submenu .el-menu-item:hover {
  background-color: rgba(255, 107, 129, 0.05) !important;
}

/* 二次元风格优化 */
.el-submenu__title:hover,
.el-menu-item:hover {
  background-color: rgba(255, 107, 129, 0.05) !important;
}

.el-menu-item.is-active:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #ff6b81;
  border-radius: 2px 0 0 2px;
}

/* 折叠状态下的样式 */
.el-menu--collapse .el-submenu__title span,
.el-menu--collapse .el-menu-item span {
  display: none;
}

.el-menu--collapse .el-submenu__title .el-icon {
  margin-right: 0;
}
</style>

<style>
/* 二级菜单弹出层样式 */
.anime-submenu {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

.anime-submenu .el-menu-item {
  min-width: 160px;
  height: 45px;
  line-height: 45px;
  transition: all 0.3s;
}

.anime-submenu .el-menu-item:hover {
  transform: translateX(5px);
}
</style>
